<script setup lang="ts">
import { ref } from "vue";
import { useEcharts } from "@/hooks/common/echarts";
import { logininfordaycount, logininfortimePeriod } from "@/service/api";
defineOptions({
  name: "LineChart",
});
const loading = ref(false);
const keys = [
  "midnightToFourAm",
  "fourAmToEightAm",
  "eightAmToNoon",
  "noonToFourPm",
  "fourPmToEightPm",
  "eightPmToMidnight",
];

const { domRef, updateOptions } = useEcharts(
  () => ({
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        label: {
          backgroundColor: "#6a7985",
        },
      },
    },
    legend: {
      data: ["访问用户数", "访问量"],
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: [] as string[],
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        color: "#8e9dff",
        name: "访问用户数",
        type: "line",
        smooth: true,
        stack: "Total",
        areaStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0.25,
                color: "#8e9dff",
              },
              {
                offset: 1,
                color: "#fff",
              },
            ],
          },
        },
        emphasis: {
          focus: "series",
        },
        data: [] as number[],
      },
      {
        color: "#26deca",
        name: "访问量",
        type: "line",
        smooth: true,
        stack: "Total",
        areaStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0.25,
                color: "#26deca",
              },
              {
                offset: 1,
                color: "#fff",
              },
            ],
          },
        },
        emphasis: {
          focus: "series",
        },
        data: [],
      },
    ],
  }),
  false
);

function getAllData() {
  return new Promise((resolve, reject) => {
    Promise.all([logininfortimePeriod(), logininfordaycount()]).then(
      ([r1, r2]) => {
        const arr: any[] = [];
        if (!r1.error) {
          arr[0] = keys.map((key) => r1.data[key]);
        }
        if (!r2.error) {
          arr[1] = keys.map((key) => r1.data[key]);
        }
        resolve(arr);
      }
    );
  });
}

function getData() {
  loading.value = true;
  getAllData().then((res: any) => {
    updateOptions((opts) => {
      opts.xAxis.data = [
        "0-4点",
        "4-8点",
        "8-12点",
        "12-16点",
        "16-20点",
        "20-24点",
      ];
      opts.series[0].data = res?.[1];
      opts.series[1].data = res?.[0];

      return opts;
    }).finally(() => (loading.value = false));
  });
}
getData();
</script>

<template>
  <ACard :bordered="false" class="card-wrapper">
    <ASpin tip="数据加载中..." :spinning="loading">
      <div ref="domRef" class="h-30px overflow-hidden"></div>
    </ASpin>
  </ACard>
</template>

<style scoped></style>
